<template>
  <div>
    <div>About</div>
    <button @click="goHome">去首页</button>

    <!-- <div v-if="error">{{ error }}</div>
    <div v-else-if="pending">loading...</div>
    <ul v-else>
      <li v-for="todo in data" :key="todo.id">
        {{ todo.name }}
      </li>
    </ul> -->

    <div v-if="pending">loading...</div>
    <ul v-else>
      <li v-for="todo in data.data" :key="todo.id">
        {{ todo.name }}
      </li>
    </ul>

    <p>{{ counter }}</p>
    <button @click="counter++">更新</button>
  </div>
</template>

<script lang="ts" setup>
useHead({
  title: "关于",
});

definePageMeta({
  layout: "custom",
});

const router = useRouter();

const goHome = () => {
  router.push("/");
};

/*
  useAsyncData (服务器请求数据)
  useLazyAsyncData

  useFetch 是useAsyncData简化使用的方式 (服务器请求数据)
  useLazyFetch

    $fetch("/api/todos", { params: { xxx } })
    $fetch("/api/todos", { method: 'POST', data: { xxx } })
*/
// const { data, pending, error, refresh } = await useAsyncData("todos", () =>
//   $fetch("/api/todos")
// );

// const { data, pending, error, refresh } = await useFetch("/api/todos", {
//   // pick: ["data"], // 挑选响应中的某些字段保留（注意：响应的值必须是对象才能使用）
//   transform: (response) => {
//     // console.log(data);
//     return response.data;
//   },
// });

// const { pending, data } = useLazyAsyncData("todos", () => $fetch("/api/todos"));
const { pending, data } = useLazyFetch("/api/todos"); // lazy请求方式在js中操作数据，必须监视watch

// console.log(pending.value);
console.log(data);

const counter = useCounter();
</script>

<style scoped></style>
